<template>
    <div>
        <myswipe :auto="4000">
            <myswipe-item v-for="item in bannerArr" :key="item.url">
                <img :src="item.url">
            </myswipe-item>
        </myswipe>

        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-md-3">
                <router-link to="/home/newslist">
                    <img src="../../images/menu1.png">
                    <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-md-3">
                <a href="#">
                    <img src="../../images/menu2.png">
                    <div class="mui-media-body">图片分享</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-md-3">
                <a href="#">
                    <img src="../../images/menu3.png">
                    <div class="mui-media-body">商品购买</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-md-3">
                <a href="#">
                    <img src="../../images/menu4.png">
                    <div class="mui-media-body">留言反馈</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-md-3">
                <a href="#">
                    <img src="../../images/menu5.png">
                    <div class="mui-media-body">视频专区</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-md-3">
                <a href="#">
                    <img src="../../images/menu6.png">
                    <div class="mui-media-body">联系我们</div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data: function() {
    return {
      bannerArr: []
    };
  },
  created: function() {
    this.getBanner();
  },
  methods: {
    getBanner() {
      console.log("getBanner");
      // this.$http.get('http://localhost/getBanner').then(function(res){
      //     console.log(res.body)
      // })
      this.bannerArr = [
        { id: 0, url: "../../images/banner01.jpg", name: "qwe" },
        { id: 1, url: "../../images/banner02.jpg", name: "asd" },
        { id: 2, url: "../../images/banner03.jpg", name: "zxc" }
      ];
      Toast("获取banner数据成功");
    }
  }
};
</script>

<style lang="sass" scoped >
    .mint-swipe{
        height: 250px;

        .mint-swipe-item{ 
            // &:nth-child(1){
            //     background:red;
            // }
            // &:nth-child(2){
            //     background:yellow;
            // }
            // &:nth-child(3){
            //     background:green;
            // }

            img{
                width:100%;
                height:100%;
            }
        }
    }
    .mui-grid-view.mui-grid-9{
        background:#fff;
        border:none;

        img{
            width:60px;
            height:60px;
        }
        .mui-media-body{
            font-size:13px !important;
        }
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border:none;
    }
</style>
